<meta charset="UTF-8">
<style>
    span{
        display: block;
        width: 100px;
        height: 100px;
        border: 2px solid red;
        font-size: 30px;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>
    <span>0</span>
</body>
<script>
    setInterval(function(){
        var font = document.createElement('div')
        font.className = 'font'
        var index = Math.floor(Math.random()*(25-0+1)+0)
        font.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')[index]
        var maxW = window.innerWidth || document.documentElement.clientWidth
        var maxH = window.innerHeight || document.documentElement.clientHeight
        font.style.position = 'absolute'
        font.style.left = Math.floor(Math.random()*(maxW - 0 + 1)+0) + 'px'
        font.style.top = Math.floor(Math.random()*(maxH - 0 + 1)+0) + 'px'
        document.body.appendChild(font)
    },1000)
        document.onkeyup = function(evt){
        var e = evt || window.event
        var fonts = document.querySelectorAll('div.font')
        fonts.forEach(function(item){
            if(e.key == item.innerText.toLowerCase()){
            document.body.removeChild(item)
            var num = parseInt(document.querySelector('span').innerText)
            document.querySelector('span').innerText = num + 1
        }
        })
    }
</script>